<template>
  <div class="qualification-submit-container">
    <div class="header-actions">
      <h2>提交资质审核</h2>
    </div>

    <div class="form-container">
      <el-form ref="qualificationForm" :model="qualificationForm" :rules="formRules" label-width="120px">
        <!-- 企业基本信息 -->
        <el-card class="section-card" shadow="hover">
          <div slot="header" class="card-header">
            <span>企业基本信息</span>
          </div>
          <el-form-item label="企业名称" prop="companyName">
            <el-input v-model="qualificationForm.companyName" placeholder="请输入企业名称"></el-input>
          </el-form-item>
          <el-form-item label="统一社会信用代码" prop="creditCode">
            <el-input v-model="qualificationForm.creditCode" placeholder="请输入统一社会信用代码"></el-input>
          </el-form-item>
          <el-form-item label="企业地址" prop="companyAddress">
            <el-input v-model="qualificationForm.companyAddress" placeholder="请输入企业地址"></el-input>
          </el-form-item>
          <el-form-item label="企业规模" prop="companyScale">
            <el-select v-model="qualificationForm.companyScale" placeholder="请选择企业规模">
              <el-option label="小型" value="small"></el-option>
              <el-option label="中型" value="medium"></el-option>
              <el-option label="大型" value="large"></el-option>
            </el-select>
          </el-form-item>
        </el-card>

        <!-- 联系人信息 -->
        <el-card class="section-card" shadow="hover">
          <div slot="header" class="card-header">
            <span>联系人信息</span>
          </div>
          <el-form-item label="联系人姓名" prop="contactName">
            <el-input v-model="qualificationForm.contactName" placeholder="请输入联系人姓名"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="contactPhone">
            <el-input v-model="qualificationForm.contactPhone" placeholder="请输入联系电话"></el-input>
          </el-form-item>
          <el-form-item label="电子邮箱" prop="contactEmail">
            <el-input v-model="qualificationForm.contactEmail" placeholder="请输入电子邮箱"></el-input>
          </el-form-item>
        </el-card>

        <!-- 资质文件 -->
        <el-card class="section-card" shadow="hover">
          <div slot="header" class="card-header">
            <span>资质文件</span>
            <el-button v-if="hasUploadingFiles" type="info" size="small" disabled>
              <i class="el-icon-loading el-icon--right"></i>上传中...
            </el-button>

          </div>
          <el-form-item label="营业执照" prop="businessLicense">
            <el-upload
              class="upload-demo"
              ref="uploadBusinessLicense"
              :http-request="handleUploadFile"
  :data="{ type: 'businessLicense' }"
  action="#"
  :before-upload="beforeUpload"
              :file-list="businessLicenseFileList"
              :limit="1"
              :auto-upload="true"
              :before-remove="beforeRemoveBusinessLicense"
              :on-remove="handleRemoveBusinessLicense"
            >
              <el-button slot="trigger" type="primary" icon="el-icon-upload">请选择你要上传的文件</el-button>
              <div slot="tip" class="el-upload__tip">支持格式：JPG/PNG/PDF • 大小限制：5MB</div>
            </el-upload>
            <div v-if="businessLicenseFileList.length > 0 && !uploadStatus.businessLicense.uploading" class="upload-progress-container">
              
              <el-button type="danger" size="small" @click="handleRemoveBusinessLicense(businessLicenseFileList[0])">移除</el-button>
              <el-image v-if="qualificationForm.businessLicense" :src="qualificationForm.businessLicense" style="width: 100px; height: 100px; margin-top: 10px;" :preview-src-list="[qualificationForm.businessLicense]"></el-image>
            </div>
            <div v-if="uploadStatus.businessLicense.uploading" class="upload-progress-container">
              <el-progress :percentage="businessLicenseProgress" status="success"></el-progress>
            </div>
          </el-form-item>
          <el-form-item label="组织机构代码证" prop="orgCodeCertificate">
            <el-upload
              class="upload-demo"
              ref="uploadOrgCodeCertificate"
              :http-request="handleUploadFile"
              :data="{ type: 'orgCodeCertificate' }"
              action="#"
              :before-upload="beforeUpload"
              :file-list="orgCodeCertificateFileList"
              :limit="1"
              :auto-upload="true"
              :before-remove="beforeRemoveOrgCodeCertificate"
              :on-remove="handleRemoveOrgCodeCertificate"
            >
              <el-button slot="trigger" type="primary" icon="el-icon-upload">请选择你要上传的文件</el-button>
              <div slot="tip" class="el-upload__tip">支持格式：JPG/PNG/PDF • 大小限制：5MB</div>
            </el-upload>
            <div v-if="orgCodeCertificateFileList.length > 0 && !uploadStatus.orgCodeCertificate.uploading" class="upload-progress-container">
              
              <el-button type="danger" size="small" @click="handleRemoveOrgCodeCertificate(orgCodeCertificateFileList[0])">移除</el-button>
              <el-image v-if="qualificationForm.orgCodeCertificate" :src="qualificationForm.orgCodeCertificate" style="width: 100px; height: 100px; margin-top: 10px;" :preview-src-list="[qualificationForm.orgCodeCertificate]"></el-image>
            </div>
            <div v-if="uploadStatus.orgCodeCertificate.uploading" class="upload-progress-container">
              <el-progress :percentage="orgCodeCertificateProgress" status="success"></el-progress>
            </div>
          </el-form-item>
          <el-form-item label="税务登记证" prop="taxRegistration">
            <el-upload
              class="upload-demo"
              ref="uploadTaxRegistration"
              :http-request="handleUploadFile"
              :data="{ type: 'taxRegistration' }"
              action="#"
              :before-upload="beforeUpload"
              :file-list="taxRegistrationFileList"
              :limit="1"
              :auto-upload="true"
              :before-remove="beforeRemoveTaxRegistration"
              :on-remove="handleRemoveTaxRegistration"
            >
              <el-button slot="trigger" type="primary" icon="el-icon-upload">请选择你要上传的文件</el-button>
              <div slot="tip" class="el-upload__tip">支持格式：JPG/PNG/PDF • 大小限制：5MB</div>
            </el-upload>
            <div v-if="taxRegistrationFileList.length > 0 && !uploadStatus.taxRegistration.uploading" class="upload-progress-container">
              <el-button type="danger" size="small" @click="handleRemoveTaxRegistration(taxRegistrationFileList[0])">移除</el-button>
              <el-image v-if="qualificationForm.taxRegistration" :src="qualificationForm.taxRegistration" style="width: 100px; height: 100px; margin-top: 10px;" :preview-src-list="[qualificationForm.taxRegistration]"></el-image>
            </div>
            <div v-if="uploadStatus.taxRegistration.uploading" class="upload-progress-container">
              <el-progress :percentage="taxRegistrationProgress" status="success"></el-progress>
            </div>
          </el-form-item>
          <el-form-item label="法定代表人身份证" prop="representativeId">
            <el-upload
              class="upload-demo"
              ref="uploadRepresentativeId"
              :http-request="handleUploadFile"
              :data="{ type: 'representativeId' }"
              action="#"
              :before-upload="beforeUpload"
              :file-list="representativeIdFileList"
              :limit="1"
              :auto-upload="true"
              :before-remove="beforeRemoveRepresentativeId"
              :on-remove="handleRemoveRepresentativeId"
            >
              <el-button slot="trigger" type="primary" icon="el-icon-upload">请选择你要上传的文件</el-button>
              <div slot="tip" class="el-upload__tip">支持格式：JPG/PNG/PDF • 大小限制：5MB</div>
            </el-upload>
            <div v-if="representativeIdFileList.length > 0 && !uploadStatus.representativeId.uploading" class="upload-progress-container">
              <el-button type="danger" size="small" @click="handleRemoveRepresentativeId(representativeIdFileList[0])">移除</el-button>
              <el-image v-if="qualificationForm.representativeId" :src="qualificationForm.representativeId" style="width: 100px; height: 100px; margin-top: 10px;" :preview-src-list="[qualificationForm.representativeId]"></el-image>
            </div>
            <div v-if="uploadStatus.representativeId.uploading" class="upload-progress-container">
              <el-progress :percentage="representativeIdProgress" status="success"></el-progress>
            </div>
          </el-form-item>
          <el-form-item label="品牌授权书" prop="authorization">
            <el-input v-model="qualificationForm.authorization" type="textarea" rows="4" placeholder="请输入品牌授权书信息"></el-input>
          </el-form-item>
          <el-form-item label="质量管理体系认证证书">
            <el-upload
              class="upload-demo"
              ref="uploadCertification"
              :http-request="handleUploadFile"
              :data="{ type: 'certification' }"
              action="#"
              :before-upload="beforeUpload"
              :file-list="certificationFileList"
              :auto-upload="true"
              :before-remove="beforeRemoveCertification"
              :on-remove="handleRemoveCertification"
            >
              <el-button slot="trigger" type="primary" icon="el-icon-upload">选择文件</el-button>
              <div slot="tip" class="el-upload__tip">支持格式：JPG/PNG/PDF • 大小限制：5MB</div>
            </el-upload>
            <div v-if="certificationFileList.length > 0 && !uploadStatus.certification.uploading">
              <el-button type="danger" size="small" @click="handleRemoveCertification(certificationFileList[0])">移除</el-button>
              <el-image v-if="qualificationForm.certification" :src="qualificationForm.certification" style="width: 100px; height: 100px; margin-top: 10px;"></el-image>
            </div>
            <div v-if="uploadStatus.certification.uploading">
              <el-progress :percentage="certificationProgress" status="success"></el-progress>
            </div>
          </el-form-item>
          <el-form-item label="检验报告">
            <el-upload
              class="upload-demo"
              ref="uploadQualityReport"
              :http-request="handleUploadFile"
              :data="{ type: 'qualityReport' }"
              action="#"
              :before-upload="beforeUpload"
              :file-list="qualityReportFileList"
              :auto-upload="true"
              :before-remove="beforeRemoveQualityReport"
              :on-remove="handleRemoveQualityReport"
            >
              <el-button slot="trigger" type="primary" icon="el-icon-upload">选择文件</el-button>
              <div slot="tip" class="el-upload__tip">支持格式：JPG/PNG/PDF • 大小限制：5MB</div>
            </el-upload>
            <div v-if="qualityReportFileList.length > 0 && !uploadStatus.qualityReport.uploading">
              <el-button type="danger" size="small" @click="handleRemoveQualityReport(qualityReportFileList[0])">移除</el-button>
              <el-image v-if="qualificationForm.qualityReport" :src="qualificationForm.qualityReport" style="width: 100px; height: 100px; margin-top: 10px;"></el-image>
            </div>
            <div v-if="uploadStatus.qualityReport.uploading">
              <el-progress :percentage="qualityReportProgress" status="success"></el-progress>
            </div>
          </el-form-item>
          <el-form-item label="其他特定行业资质证书">
            <el-input v-model="qualificationForm.certificates" type="textarea" rows="4" placeholder="请输入其他特定行业资质证书信息（JSON格式存储多个证书信息）"></el-input>
          </el-form-item>
          <el-form-item label="其他资质文件">
            <el-upload
              class="upload-demo"
              ref="uploadOtherFiles"
              :http-request="handleUploadFile"
              :data="{ type: 'otherFiles' }"
              action="#"
              :before-upload="beforeUpload"
              :file-list="otherFilesList"
              multiple
              :auto-upload="true"
              :before-remove="beforeRemoveOtherFile"
              :on-remove="handleRemoveOtherFile"
              :drag="true"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">请拖放文件到此区域或 <em>点击选择你要上传的文件</em></div>
              <div slot="tip" class="el-upload__tip">支持格式：JPG/PNG/PDF • 单文件5MB • 最多5个文件</div>
            </el-upload>
            <div v-for="(file, index) in otherFilesList" :key="index" class="upload-progress-container">
              <div class="file-info">
                <span>{{ file.name }}</span>
                <div v-if="!uploadStatus.otherFiles[index]?.uploading">
                  
                  <el-button type="danger" size="small" @click="handleRemoveOtherFile(file)">移除</el-button>
                </div>
                <div v-if="uploadStatus.otherFiles[index]?.uploading">
                  <el-progress :percentage="otherFilesProgress[index]" status="success" :text-inside="true" :stroke-width="14"></el-progress>
                </div>
              </div>
              <el-image v-if="file.url" :src="file.url" style="width: 100px; height: 100px; margin-top: 10px;" :preview-src-list="[file.url]"></el-image>
            </div>
          </el-form-item>
        </el-card>

        <!-- 提交按钮 -->
        <div class="submit-button-container">
          <el-button type="primary" @click="submitForm" :loading="submitting">提交审核</el-button>
          <el-button @click="resetForm">重置</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { submitQualification } from '../api/qualificationApi';
import axios from 'axios';

export default {
  name: 'QualificationSubmit',
  data() {
        return {
          qualificationForm: {
            companyName: '',
            creditCode: '',
            companyAddress: '',
            companyScale: '',
            contactName: '',
            contactPhone: '',
            contactEmail: '',
            businessLicense: '',
            orgCodeCertificate: '',
            taxRegistration: '',
            representativeId: '',
            authorization: '',
            certification: '',
            qualityReport: '',
            certificates: '',
            otherFiles: []
          },
          formRules: {
            companyName: [
              { required: true, message: '请输入企业名称', trigger: 'blur' }
            ],
            creditCode: [
              { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
              { message: '统一社会信用代码格式不正确', trigger: 'blur' }
            ],
            companyAddress: [
              { required: true, message: '请输入企业地址', trigger: 'blur' }
            ],
            companyScale: [
              { required: true, message: '请选择企业规模', trigger: 'change' }
            ],
            contactName: [
              { required: true, message: '请输入联系人姓名', trigger: 'blur' }
            ],
            contactPhone: [
              { required: true, message: '请输入联系电话', trigger: 'blur' },
              { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
            ],
            contactEmail: [
              { required: true, message: '请输入电子邮箱', trigger: 'blur' },
              { type: 'email', message: '电子邮箱格式不正确', trigger: 'blur' }
            ],
            authorization: [
              { required: true, message: '请输入品牌授权书信息', trigger: 'blur' },
              { validator: this.validateJson, trigger: 'blur' }
            ],
          },
          businessLicenseFileList: [],
          orgCodeCertificateFileList: [],
          taxRegistrationFileList: [],
          representativeIdFileList: [],
          certificationFileList: [],
          qualityReportFileList: [],
          otherFilesList: [],
          businessLicenseProgress: 0,
          orgCodeCertificateProgress: 0,
          taxRegistrationProgress: 0,
          representativeIdProgress: 0,
          certificationProgress: 0,
          qualityReportProgress: 0,
          otherFilesProgress: {},
          submitting: false,
          uploadStatus: {
            businessLicense: {
              uploading: false,
              progress: 0
            },
            orgCodeCertificate: {
              uploading: false,
              progress: 0
            },
            taxRegistration: {
              uploading: false,
              progress: 0
            },
            representativeId: {
              uploading: false,
              progress: 0
            },
            certification: {
              uploading: false,
              progress: 0
            },
            qualityReport: {
              uploading: false,
              progress: 0
            },
            otherFiles: {}
          }
        };
  },
  computed: {
    hasUploadingFiles() {
      return this.uploadStatus.businessLicense.uploading || 
             this.uploadStatus.orgCodeCertificate.uploading ||
             Object.values(this.uploadStatus.otherFiles).some(f => f.uploading);
    }
  },
  methods: {
    beforeUpload(file) {
      // 检查文件类型和大小
      const isValidType = ['image/jpeg', 'image/jpg', 'image/png', 'application/pdf'].includes(file.type);
      const isLt5M = file.size / 1024 / 1024 <= 5;
      // const isOtherFilesValid = this.otherFilesList.length < 5;

      if (!isValidType) {
        this.$message.error('文件格式错误！支持类型：JPG/PNG/PDF');
        return false;
      }
      if (!isLt5M) {
        this.$message.error('上传文件大小不能超过 5MB!');
        return false;
      }
      return true;
    },
    // 上传所有文件
    uploadAllFiles() {
      // 移除调试日志
      console.log('上传所有文件按钮被点击');
      if (this.hasUploadingFiles) {
        this.$message.warning('已有文件正在上传，请等待完成后再试');
        return;
      }

      // 检查是否有文件可上传
      const hasFilesToUpload = 
        (this.businessLicenseFileList.length > 0) ||
        (this.orgCodeCertificateFileList.length > 0) ||
        (this.otherFilesList.length > 0);

      if (!hasFilesToUpload) {
        this.$message.warning('请先选择要上传的文件');
        return;
      }

      // 上传营业执照
      if (this.businessLicenseFileList.length > 0 && !this.qualificationForm.businessLicense) {
        console.log('开始上传营业执照');
        this.handleUploadFile({ file: this.businessLicenseFileList[0].raw, data: { type: 'businessLicense' }, onProgress: () => {} });
      }

      // 上传组织机构代码证
      if (this.orgCodeCertificateFileList.length > 0 && !this.qualificationForm.orgCodeCertificate) {
        console.log('开始上传组织机构代码证');
        this.handleUploadFile({ file: this.orgCodeCertificateFileList[0].raw, data: { type: 'orgCodeCertificate' }, onProgress: () => {} });
      }

      // 上传质量管理体系认证证书
      if (this.certificationFileList.length > 0 && !this.qualificationForm.certification) {
        console.log('开始上传质量管理体系认证证书');
        this.handleUploadFile({ file: this.certificationFileList[0].raw, data: { type: 'certification' }, onProgress: () => {} });
      }

      // 上传检验报告
      if (this.qualityReportFileList.length > 0 && !this.qualificationForm.qualityReport) {
        console.log('开始上传检验报告');
        this.handleUploadFile({ file: this.qualityReportFileList[0].raw, data: { type: 'qualityReport' }, onProgress: () => {} });
      }

      // 上传其他文件
      this.otherFilesList.forEach((fileItem, index) => {
        if (!fileItem.url) {
          console.log('开始上传其他文件:', index);
          this.handleUploadFile({ file: fileItem.raw, data: { type: 'otherFiles', index: index }, onProgress: () => {} });
        }
      });
    },
    // 处理文件上传
    handleUploadFile(params) {
      const { file, data, onProgress } = params;
      const { type, index } = data;
      if (!file) { console.error('Missing file in upload parameters'); this.uploadStatus[type].uploading = false; return; }
       this.uploadStatus[type].uploading = true;
        let statusObj;
        if (type === 'otherFiles') {
          this.$set(this.uploadStatus.otherFiles, index, { uploading: true, progress: 0 });
          statusObj = this.uploadStatus.otherFiles[index];
        } else {
          statusObj = this.uploadStatus[type];
          statusObj.uploading = true;
          statusObj.progress = 0;
        }
      // 使用导入的uploadFile API函数，避免与组件方法重名
      const formData = new FormData();
      formData.append('file', file);
      axios.post('/api/product_spu/uploadImage', formData, {
          headers: { 'Content-Type': undefined }, onUploadProgress: progressEvent => {
            const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total); 
            if (type === 'businessLicense') {
              this.businessLicenseProgress = percent;
            } else if (type === 'orgCodeCertificate') {
              this.orgCodeCertificateProgress = percent;
            } else if (type === 'certification') {
              this.certificationProgress = percent;
            } else if (type === 'qualityReport') {
              this.qualityReportProgress = percent;
            } else if (type === 'otherFiles') {
              this.$set(this.otherFilesProgress, index, percent);
            }
            onProgress({ percent });
          }
        }).then(response => { 
              const fileUrl = response.data.msg;
               const fileName = response.data.fileName || file.name; // 兼容文件名获取

              console.log('Upload response data:', response.data); // 调试日志
               // 简化成功判断：只要后端返回200且有URL即视为成功
               if (fileUrl) {
                if (type === 'businessLicense') {
                    this.qualificationForm.businessLicense = fileUrl;
                    this.businessLicenseFileList = [{ name: fileName, url: fileUrl }];
                    this.$message.success('营业执照上传成功');
                  } else if (type === 'orgCodeCertificate') {
                      this.qualificationForm.orgCodeCertificate = fileUrl;
                      this.orgCodeCertificateFileList = [{ name: fileName, url: fileUrl }];
                      this.$message.success('组织机构代码证上传成功');
                  } else if (type === 'certification') {
                    this.qualificationForm.certification = fileUrl;
                    this.certificationFileList = [{ name: fileName, url: fileUrl }];
                    this.$message.success('质量管理体系认证证书上传成功');
                  } else if (type === 'qualityReport') {
                    this.qualificationForm.qualityReport = fileUrl;
                    this.qualityReportFileList = [{ name: fileName, url: fileUrl }];
                    this.$message.success('检验报告上传成功');
                  } else if (type === 'otherFiles') {
                      this.qualificationForm.otherFiles.push(fileUrl);
                      this.$set(this.otherFilesList[index], 'url', fileUrl);
                      this.$message.success(`文件 ${fileName} 上传成功`);
                    }
              } else {
                const error = new Error('文件上传失败: ' + (response.data.msg || '未知错误'));
                error.response = response;
                throw error;
              }
          }
        ).catch(error => {
          this.$message.error('文件上传失败: ' + ((error.response && error.response.data && error.response.data.msg) || error.message));
        }).finally(() => {
          statusObj.uploading = false;
        });
     },
    // 文件移除确认
    beforeRemoveBusinessLicense(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 处理营业执照移除
    handleRemoveBusinessLicense() {
      this.qualificationForm.businessLicense = '';
      this.businessLicenseFileList = [];
    },
    // 文件移除确认
    beforeRemoveOrgCodeCertificate(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 处理组织机构代码证移除
    handleRemoveOrgCodeCertificate() {
      this.qualificationForm.orgCodeCertificate = '';
      this.orgCodeCertificateFileList = [];
    },
    handleRemoveRepresentativeId() {
      this.qualificationForm.representativeId = '';
      this.representativeIdFileList = [];
    },
    beforeRemoveTaxRegistration(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    handleRemoveTaxRegistration() {
      this.qualificationForm.taxRegistration = '';
      this.taxRegistrationFileList = [];
    },
    // 文件移除确认
    beforeRemoveRepresentativeId(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 文件移除确认
    beforeRemoveCertification(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 处理质量管理体系认证证书移除
    handleRemoveCertification() {
      this.qualificationForm.certification = '';
      this.certificationFileList = [];
    },
    // 文件移除确认
    beforeRemoveQualityReport(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 处理检验报告移除
    handleRemoveQualityReport() {
      this.qualificationForm.qualityReport = '';
      this.qualityReportFileList = [];
    },
    // 文件移除确认
    beforeRemoveOtherFile(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 处理其他文件移除
    handleRemoveOtherFile(file) {
      // 找到并移除对应的文件URL
      const index = this.otherFilesList.findIndex(item => item.name === file.name);
      if (index !== -1) {
        this.otherFilesList.splice(index, 1);
        // 清理上传状态和进度
        this.$delete(this.uploadStatus.otherFiles, index);
        this.$delete(this.otherFilesProgress, index);
      }

      // 从otherFiles数组中移除对应的URL
      const urlIndex = this.qualificationForm.otherFiles.findIndex(url => url.includes(file.name));
      if (urlIndex !== -1) {
        this.qualificationForm.otherFiles.splice(urlIndex, 1);
      }
    },
    // validateJson(rule, value, callback) {
    //     if (!value) {
    //       return callback();
    //     }
    //     try {
    //       JSON.parse(value);
    //       callback();
    //     } catch (error) {
    //       callback(new Error('请输入有效的JSON格式'));
    //     }
    //   },
      submitForm() {
      // 检查是否有文件正在上传
      if (this.hasUploadingFiles) {
        this.$message.warning('有文件正在上传，请等待上传完成后再提交');
        return;
      }

      this.$refs.qualificationForm.validate(valid => {
        if (valid) {
          this.submitting = true;
          // 转换品牌授权书为JSON对象
          const formData = {...this.qualificationForm};
          try {
            formData.authorization = JSON.parse(formData.authorization);
          } catch (error) {
            this.$message.error('品牌授权书JSON格式解析失败');
            this.submitting = false;
            return;
          }
          // 提交表单数据
          submitQualification(formData)
            .then(response => {
              console.log('提交成功:', response);
              if (response.data.code === 0) {
                this.$message.success('资质提交成功，请等待审核');
                // 重置表单
                this.resetForm();
              } else {
                this.$message.error('资质提交失败: ' + response.msg);
              }
            })
            .catch(error => {
              console.error('提交资质失败:', error);
              this.$message.error('提交资质失败，请稍后重试');
            })
            .finally(() => {
              this.submitting = false;
            });
        }
      });
    },
    resetForm() {
      this.$refs.qualificationForm.resetFields();
      this.businessLicenseFileList = [];
      this.orgCodeCertificateFileList = [];
      this.otherFilesList = [];
      this.qualificationForm.Files = [];
      // 重置上传状态
      this.uploadStatus.businessLicense.uploading = false;
      this.uploadStatus.orgCodeCertificate.uploading = false;
      this.uploadStatus.otherFiles = {};
    }
  }
};
</script>

<style scoped>
.qualification-submit-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header-actions {
  margin-bottom: 20px;
}

.form-container {
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.section-card {
  margin-bottom: 20px;
  border-radius: 4px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  color: #333;
}

.submit-button-container {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.submit-button-container .el-button {
  margin: 0 10px;
  width: 120px;
}

.upload-progress-container {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.file-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
</style>